<template>
	<view class="container999">
		<zwyList ref="zwyList" :noMore="noMore" @loadMore="getList" :listLength="listLength" @refresh="getList('refresh')">
			<!-- #ifdef MP-TOUTIAO  -->
			<navTopTT :title="title" :showBack="true"></navTopTT>
			<!-- #endif -->
			<!-- #ifdef MP-KUAISHOU  -->
			<navTop :title="title" :showBack="true"></navTop>
			<!-- #endif -->
			<view class="content">
                <!-- 消费记录 -->
				<view v-if="type === 'history'" class="lineBox">
					<view v-for="(item, index) in historyList" :key="index" class="line-item1 flex align-center">
                        <view class="flex flex-direction margin-right-xl">
                            <text>{{ item.createTime | timeWeekText }}</text>
                            <text class="text-gray margin-top-sm">{{ item.createTime | hourMinutes }}</text>
                        </view>
                        <view class="flex flex-direction flex-sub">
                            <view class="flex align-center">
								<!-- #ifdef MP-KUAISHOU -->
                                <text class="text-right-sm text-pink">购买</text>
								<!-- #endif -->
								<!-- #ifdef MP-TOUTIAO -->
                                <text class="text-right-sm color-set-blue">购买</text>
								<!-- #endif -->
                                <text class="text-cut set-width">{{ (item.goodsList[0] || {}).goodsDesc || '' }}</text>
                            </view>
                            <view class="flex align-center justify-between margin-top-sm">
                                <text class="text-gray">{{ item.createTime | yearMonthDay }}</text>
								<!-- #ifdef MP-KUAISHOU -->
                                <text class="text-gray">{{(item.goodsList[0] || {}).moneyFen || 0 | fruitNum10 }} {{ moneyName }}</text>
								<!-- #endif -->
								<!-- #ifdef MP-TOUTIAO -->
                                <!-- <text class="text-gray">{{(item.goodsList[0] || {}).moneyFen || 0 | fruitNum10 }} {{ moneyName }}</text> -->
                                <text class="text-gray">{{(item.goodsList[0] || {}).moneyFen || 0 }} {{ moneyName }}</text>
								<!-- #endif -->
                                
                            </view>
                        </view>
                    </view>
				</view>
                <!-- 充值记录 -->
                <view v-if="type === 'money'" class="lineBox">
					<view v-for="(item, index) in historyList" :key="index">
						<view class="margin-top-sm">
							<view class="text-df text-gray">
								{{ item.createTime  | yearMonthDayHhMmSs }}
							</view>
						</view>
						<view  class="line-item2 flex align-center">
							<!-- <view class="flex flex-direction margin-right-xl">
								<text>{{ item.createTime | timeWeekText }}</text>
								<text class="text-gray margin-top-sm">{{ item.createTime | hourMinutes }}</text>
							</view> -->
							<view class="flex flex-sub justify-between align-center">
								<view class="flex align-center">
									<!-- #ifdef MP-KUAISHOU -->
									<image src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/pay_icon3.png" class="margin-right-sm img-box2"></image>
									<!-- #endif -->
									<!-- #ifdef MP-TOUTIAO -->
									<image src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/money_set.png" class="margin-right-sm img-box2"></image>
									<!-- #endif -->
									<view class="flex flex-direction">
										{{ item.payType }} {{ item.moneyFen | moneyFenToYuan }}元
										<view class="margin-top-xs" @tap="copyOrderId(item.id)">
											<text class="text-gray margin-top-sm">订单编号:{{ item.id }}</text>
											<text class="color-set-blue text-df margin-left-sm">复制</text>
										</view>
										
									</view>
								</view>
								<!-- #ifdef MP-KUAISHOU -->
								<text class="text-pink">+{{ item.totalMoneyFen | fruitNum10 }}{{ moneyName }}</text>
								<!-- #endif -->
								<!-- #ifdef MP-TOUTIAO -->
								<!-- <text class="color-set-blue">+{{ item.totalMoneyFen | fruitNum10 }}{{ moneyName }}</text> -->
								<text v-if="item.payUseName !='FOR_MEMBERSHIP'" class="color-set-blue">+{{ item.totalMoneyFen }}{{ moneyName }}</text>
								<text v-if="item.payUseName =='FOR_MEMBERSHIP'" class="color-set-blue">+ SVIP{{ item.payViewStr }}</text>
								<!-- #endif -->
								
							</view>
						</view>
					</view>
				</view>
                
                <!-- 无数据展示 -->
                <noData v-if="historyList.length === 0 && noMore === 1"></noData>
			</view>
		</zwyList>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
            type: '',
			listLength: 0,
			noMore: 0,
			historyList: [],
            title: '',
            moneyName: this.moneyName,
			isIos: getApp().globalData.isIos
		};
	},
    onLoad(opt) {
        this.type = opt.type || 'history'
        this.title = opt.type === 'history' ? '消费记录' : '充值记录'
		this.getList('refresh');
	},
	methods: {
		copyOrderId(val){
			console.log(val)
			if(!val) return
			uni.setClipboardData({
				data: `${val}`
			})
			uni.showToast({
				title: '复制成功',
				icon: 'none'
			})
		},
		async getList(type) {
            let nextId = 0
			if (type == 'refresh') {
				this.noMore = 2
			} else {
				this.noMore = 2
                nextId = this.historyList.length ? this.historyList[this.historyList.length - 1].id : 0
			}
            
            let apiUrl = this.type === 'money' ? `/wealth/api/pay_order/pay_record?nextId=${nextId}` : `/cdp/payment/purchased_logs?nextId=${nextId}`
			this.zwyRequest({
				url: apiUrl
			}).then(async res => {
				if (res) {
					let tempList;
					if (type == 'refresh') {
						tempList = res
					} else {
						tempList = this.historyList.concat(res)
					}
					let tempMore = 0

					if (res.length == 0) {
						tempMore = 1
					}
					this.historyList = tempList
					this.noMore = tempMore
					this.listLength = tempList.length
					console.log('this.historyList----', this.historyList)
					await this.$nextTick()
					setTimeout(() => {
						this.$refs.zwyList && this.$refs.zwyList.endAfter()
					}, 500)
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.barMargin {
	width: 100%;
	height: 100rpx;
}
.content {
	padding: 30rpx;
	flex-direction: column;
}
.lineBox {
	flex-direction: column;
    padding-left: 24rpx;
}
.noData {
	width: 100%;
	height: 400rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.container {
	height: 100%;
	width: 100%;
	flex-direction: column;
}

.noMore {
	width: 100%;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
page {
	background-color: white !important;
	border-top: 1rpx solid #f6f6f6;
}

.line-item1 {
    padding: 0 20rpx;
    height: 138rpx;
    border-bottom: 1rpx solid #EEEEEE;
}

.set-width {
    width: 350rpx;
}
.line-item2 {
    padding: 0 20rpx;
    height: 138rpx;
    border-bottom: 1rpx solid #EEEEEE;
    image {
        width: 40rpx;
        height: 40rpx;
    }
}

.color-set-blue {
    color: #017AFF !important;
}
</style>
